<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      .box{width:100px;height:50px}
      .red{background: red;}
    </style>
	</head>
	<body>
    <div id="app">
      <button v-on:click="msg += 5">按钮</button>
      <p>{{msg}}</p>
      <button @dblclick="num += 5">按钮</button>
      <p>{{num}}</p>
      <button @click="fn1">按钮</button>
      <p>{{sum}}</p>
      <button @click="fn2('hello')">按钮</button>
      <p>{{sum}}</p>
      <button @click="fn3($event)">按钮</button>
      <p>{{sum}}</p>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    
    var vm = new Vue({
      el:"#app",
      data:{
        msg:2,
        num:3,
        sum:0
      },
      methods:{
        fn1(){
          // this === vm
          console.log("hello");
          this.sum = this.msg + this.num;
        },
        fn2(v){
          this.sum = v
        },
        fn3(e){
          console.log(e);
        }
      }
    })
    
  </script>
</html>
